﻿@inject EmployeeService EmployeeService

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridTemplate#RowPreviewTemplate" />Row Preview Template</h2>
    <p>
        This demo illustrates how to use the Data Grid’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowPreviewTemplate">RowPreviewTemplate</a> property to show preview sections under each data row across all columns. These sections can display any content, such as tables, images, values from data source fields, custom text, and so on.
    </p>
    <p>The template's <b>Context</b> parameter has the following properties:</p>
    <ul>
        <li>
            <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataRowInfo-1.RowIndex" target="_blank" rel="nofollow">RowIndex</a> - Returns a zero-based row index.
        </li>
        <li>
            <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataRowInfo-1.DataItem" target="_blank" rel="nofollow">DataItem</a> - Returns a data item that corresponds to the row.
        </li>
    </ul>
    <p>
        When you define the row preview template, use the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.Columns" target="_blank" rel="nofollow">Columns</a> property to add Data Grid columns.
    </p>
</div>

@if (DataSource == null) {
    <p><em>Loading...</em></p>
}
else {
    <DxDataGrid Data="@DataSource"
                VerticalScrollBarMode="ScrollBarMode.Auto"
                VerticalScrollableHeight="400"
                ShowPager="false"
                ShowFilterRow="true"
                CssClass="mw-1100">

        <Columns>
            <DxDataGridColumn Field="@nameof(Employee.FirstName)" SortOrder="DataGridColumnSortOrder.Ascending"></DxDataGridColumn>
            <DxDataGridColumn Field="@nameof(Employee.LastName)"></DxDataGridColumn>
            <DxDataGridColumn Field="@nameof(Employee.Position)" Caption="Position" EditorVisible="@true"></DxDataGridColumn>
            <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" DisplayFormat="D" Caption="Birth Date" EditorVisible="@true"></DxDataGridDateEditColumn>
            <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" DisplayFormat="D" Caption="Hire Date" EditorVisible="@true"></DxDataGridDateEditColumn>
        </Columns>
        <RowPreviewTemplate Context="ItemInfo">
            @{
                Employee employee = ItemInfo.DataItem;
                <table cellpadding="5" cellspacing="0">
                    <tbody>
                        <tr>
                            <td rowspan="4" style="border: 0px;">
                                <img src="@(StaticAssetUtils.GetImagePath($"Employees/{employee.FileName}.png"))" width="76" />
                            </td>
                            <td style="border: 0px; white-space: normal; vertical-align:middle;">
                                @employee.Notes
                            </td>
                        </tr>
                    </tbody>
                </table>
            }
        </RowPreviewTemplate>
    </DxDataGrid>

    <CodeSnippet_Grid_RowPreviewTemplate></CodeSnippet_Grid_RowPreviewTemplate>
}

@code {
    IQueryable<Employee> DataSource;

    protected override async Task OnInitializedAsync() {
        DataSource = await EmployeeService.Load();
    }
}
